<template>
    <!-- vue3页面 -->
    
    <div class="publicWrap"> 
        <el-container class="content_wrap">
            <el-header>
                <t-header @handleCollapse='handleCollapseP'></t-header>
            </el-header>
            <el-container class="content">
                <el-aside :width="isCollapse?'60px':'200px'">
                    <nav-bar :isCollapse='isCollapse' ></nav-bar>
                </el-aside>
                <!-- <el-container > -->
                    <el-main class="content-box " :class="{'content-collapse':isCollapse}">
                        <tabs></tabs>
                    </el-main>
                    
                <!-- </el-container> -->
            </el-container>
            <el-footer class="footer"></el-footer>
        </el-container>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, ref } from 'vue'
import navBar from './navBar.vue'
import Tabs from './tabs.vue'
import THeader from './header.vue'
export default defineComponent({
    
    name: 'public',
    components: { navBar,Tabs,THeader },
    setup() {
        const isCollapse = ref(false)
        const handleCollapseP=(val: any)=>{
            console.log(val,'jieshou')
            isCollapse.value = val

        }
        return {
            handleCollapseP,
            isCollapse
        }
    }
})
</script>

<style scoped>
.publicWrap {
    width:100%;
    height:100%;
    overflow: hidden;
    background: #d4d4d4;
}
.footer{
    height: 2vh;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #111422;
    z-index: 999;
}
.content{
    width: 100%;
    height: 100%;
}

</style>